﻿@model PageDataVM<List<People>>
@{
    ViewData["Title"] = "学生管理";
}

@section Css{
    <link rel="stylesheet" href="~/css/leader.css" asp-append-version="true"/>
    <script src="~/lib/layer/layer.js"></script>
    <style>
        .layui-layer-page .layui-layer-content {
            overflow-x: hidden !important;
        }
    </style>
}

<div class="content">
    <h2>学生管理：</h2>

    <div class="content-table">
        <div class="content-ctl">
            <button id="addStudent" class="btn btn-sm btn-primary">添加</button>
        </div>

        <form class="row g-3" style="padding: 10px; display: none;" id="studentForm">
            <div class="col-12">
                <label for="number" class="form-label">编号</label>
                <input type="text" name="number" class="form-control" id="number">
            </div>
            <div class="col-12">
                <label for="name" class="form-label">姓名</label>
                <input type="text" name="name" class="form-control" id="name">
            </div>
            <div class="col-12">
                <label for="password" class="form-label">密码</label>
                <input type="password" name="password" class="form-control" id="password">
            </div>
            <div class="col-12">
                <a id="onAddStudent" class="btn btn-primary">添加</a>
            </div>
        </form>

        <table class="table table-striped table-hover">
            <thead>
            <tr>
                <th scope="col">#</th>
                <th scope="col">编号</th>
                <th scope="col">名称</th>
                <th scope="col">操作</th>
            </tr>
            </thead>
            <tbody>
            @if (Model?.Data != null)
            {
                int i = 1;
                foreach (var item in Model.Data)
                {
                    <tr>
                        <th scope="row">@i</th>
                        <td>@item.Number</td>
                        <td>@item.Name</td>
                        <td>
                            <a class="btn btn-outline-danger btn-sm" onclick="deleteStudent(@item.PeopleId)">删除</a>
                        </td>
                    </tr>
                    i++;
                }
            }
            </tbody>
        </table>
       
        @await Html.PartialAsync("Pagniation")
        <div style="width: 100%; height: 10px;"></div>
    </div>
</div>

@section Scripts{
    @*<script src="~/lib/angular/angular.js"></script>*@
    @*<script src="~/lib/echarts/dist/echarts.min.js"></script>*@
    @*<script src="~/js/leader.js"></script>*@
    @*<script src="~/js/leader_new.js"></script>*@
    <script>
            $(function() {
                $("#addStudent").on("click",function(e) {
                    //页面层
                    layer.open({
                        type: 1,
                        title:'添加通知',
                        //skin: 'layui-layer-rim', //加上边框
                        area:['80%','auto'],
                        content: $("#studentForm")
                    });
                });

                $("#onAddStudent").on('click',function(e) {
                    //页面层
                    $.ajax({
                        url:"stu/add",
                        method:"post",
                        data:$("#studentForm").serialize(),
                        success:function(res) {
                            if (res.suc) {
                                layer.msg('添加成功', {icon: 1});
                                window.location.reload();
                            }else{
                                layer.msg(res.msg, {icon: 1});
                            }
                        }
                    });
                });
            })

            function deleteStudent(id) {
                //询问框
                layer.confirm('确定删除？', {
                    title:"删除",
                    btn: ['确定','取消'] //按钮
                }, function(){
                    //页面层
                    $.ajax({
                        url:"stu/delete?id="+id,
                        method:"delete",
                        success:function(res) {
                            if (res.suc) {
                                layer.msg('删除成功', {icon: 1});
                                window.location.reload();
                            }else{
                                layer.msg(res.msg, {icon: 1});
                            }
                        }
                    });
                }, function(){
                    //layer.msg('也可以这样', {
                    //    time: 20000, //20s后自动关闭
                    //    btn: ['明白了', '知道了']
                    //});
                });
            }
        </script>

}